import { Component } from "react";
// 引入 Swiper, SwiperItem 组件
import { Swiper, SwiperItem, Image, View } from "@tarojs/components";

import "./index.scss";

import { AtList, AtListItem } from "taro-ui";
import { size } from "lodash";

const imgFile = {
  // 进行变量定义（会vue的同学：这个地方就相当于 data 的return里所定义的）
  // 例如
  img1: "https://img14.360buyimg.com/babel/s700x360_jfs/t1/4099/12/2578/101668/5b971b4bE65ae279d/89dd1764797acfd9.jpg!q90!cc_350x180",
  img2: "https://img11.360buyimg.com/babel/s700x360_jfs/t1/4776/39/2280/143162/5b9642a5E83bcda10/d93064343eb12276.jpg!q90!cc_350x180",
  img3: "https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180",
};

function SwiperFunction() {
  const swiperClass = {
    width: "100%",
    height: "100%",
  };

  const imageStyl = {
    width: "100%",
    height: "100%",
  };

  return (
    <>
      <Swiper
        className={swiperClass}
        indicatorColor="#999"
        indicatorActiveColor="#333"
        interval={3000}
        circular
        indicatorDots
        autoplay
      >
        <SwiperItem>
          <Image style={imageStyl} src={imgFile.img1} />
        </SwiperItem>
        <SwiperItem>
          <Image style={imageStyl} src={imgFile.img2} />
        </SwiperItem>
        <SwiperItem>
          <Image style={imageStyl} src={imgFile.img3} />
        </SwiperItem>
      </Swiper>
    </>
  );
}

function ListFunction() {
  const aListClass = {};
  const itemList = [
    { id: 1, name: "青菜类" },
    { id: 2, name: "馋嘴小川" },
    { id: 3, name: "烧烤类" },
    { id: 4, name: "主食类" },
    { id: 5, name: "铁板烧海鲜类" },
    { id: 6, name: "锡纸类" },
    { id: 7, name: "凉菜类" },
    { id: 8, name: "酒水类" },
    { id: 9, name: "套餐类" },
    { id: 10, name: "下单福利" },
  ];
  const selectedStyle = {
    'background-color':'red'
  };

  return (
    <>
      <AtList className={aListClass} hasBorder={false}>
        {itemList.map((item) => {
          return (
            <AtListItem key={item.id} className={selectedStyle} title={item.name} hasBorder={false}
            style={{'background-color':'red'}} />
          );
        })}

 
      </AtList>
    </>
  );
}

function FlexFunction() {
  const imageStyl = {
    width: "180rpx",
    height: "180rpx",
  };

  return (
    <View className="at-row">
      <View className="at-col at-col-1 at-col--auto">
        <Image style={imageStyl} src={imgFile.img1} />
      </View>
      <View className="at-col">
        <View className="at-col">
          <View className="at-col">一人食套餐</View>
          <View className="at-col detail-class-name"> 口感爽口 </View>
          <View className="at-col detail-class-name">月售5</View>
          <View className="at-col">￥39.9</View>
        </View>
      </View>
    </View>
  );
}

function ListFelxFunction() {
  const listData = [
    { id: 1, name: "" },
    { id: 2, name: "" },
    { id: 3, name: "" },
    { id: 4, name: "" },
    { id: 5, name: "" },
    { id: 6, name: "" },
    { id: 7, name: "" },
    { id: 8, name: "" },
    { id: 9, name: "" },
    { id: 10, name: "" },
    { id: 11, name: "" },
  ];
  return listData.map((item) => {
  return  <FlexFunction key={item.id}></FlexFunction>;
  });
}

class App extends Component {
  render() {
    return (
      <>
        <>
          <SwiperFunction></SwiperFunction>
        </>
        <>
          <View className="at-row">
            <View className="at-col at-col-1 at-col--auto">
              <ListFunction></ListFunction>
            </View>
            <View className="at-col at-col-1 at-col--auto flexclass">
              <ListFelxFunction></ListFelxFunction>
            </View>
          </View>
        </>
      </>
    );
  }
}

export default App;
